:root {
  --small-btn: 16px;
  --medium-btn: 24px;
  --large-btn: 32px;
}

.icon {
  line-height: 0;
}

.icon-btn {
  cursor: pointer;
  display: grid;
  flex-shrink: 0;
  place-content: center;
  background: transparent;
  border: none;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;

  &:active {
    transform: scale(0.95);
  }

  &:hover {
    color: var(--white-accent-clr);
  }
}

.small {
  width: var(--small-btn);
  height: var(--small-btn);
  font-size: calc(var(--small-btn) * 0.5);

  &.without-border {
    font-size: var(--small-btn);
  }
}

.medium {
  width: var(--medium-btn);
  height: var(--medium-btn);
  font-size: calc(var(--medium-btn) * 0.5);

  &.without-border {
    font-size: var(--medium-btn);
  }
}

.large {
  width: var(--large-btn);
  height: var(--large-btn);
  font-size: calc(var(--large-btn) * 0.6);

  &.without-border {
    font-size: var(--large-btn);
  }
}

.primary {
  color: hsl(var(--navigation-hs) var(--lt-400));
  border: 1px solid hsl(var(--navigation-hs) var(--lt-400));

  &:hover {
    background-color: hsl(var(--navigation-hs) var(--lt-400));
  }
}

.warn {
  color: var(--clr-accent-warn);
  border: 1px solid var(--clr-accent-warn);

  &:hover {
    background-color: var(--clr-accent-warn);
  }
}

.error {
  color: var(--clr-accent-danger);
  border: 1px solid var(--clr-accent-danger);

  &:hover {
    background-color: var(--clr-accent-danger);
  }
}

.success {
  color: var(--clr-accent-success);
  border: 1px solid var(--clr-accent-success);

  &:hover {
    background-color: var(--clr-accent-success);
  }
}

.text {
  color: var(--clr-accent-text);
  border: 1px solid var(--clr-accent-text);

  &:hover {
    background-color: var(--clr-accent-text);
  }
}

.default {
  color: var(--clr-nav-main);
  border: none;
  outline: none;

  &:hover {
    color: var(--clr-nav-main);
  }
}

.rounded {
  border-radius: var(--fs-2xs);
}

.square {
  border-radius: 0;
}

.circle {
  border-radius: var(--radius-full);
}

.without-border {
  border: none;
}
